<!-- 文件路径: src/components/TaskRouteDisplay.vue -->
<template>
  <div class="task-route-display">
    <!-- 任务信息面板 -->
    <div class="task-info-panel" v-if="showTaskPanel && task">
      <h3>任务信息</h3>
      <div class="task-details">
        <p><strong>任务名称:</strong> {{ task.task }}</p>
        <p><strong>任务编号:</strong> {{ task.taskCode }}</p>
        <p><strong>车辆编号:</strong> {{ getTrainNo() }}</p>
      </div>
      <div class="task-controls">
        <button @click="startRouteAnimation" :disabled="isAnimating">开始模拟</button>
        <button @click="stopRouteAnimation" :disabled="!isAnimating">停止模拟</button>
        <button @click="toggleSubwayVisibility">地铁{{ showSubway ? '隐藏' : '显示' }}</button>
        <button @click="searchNearbySubway">搜索附近地铁</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TaskRouteDisplay",
  props: {
    // 地图实例
    map: {
      type: Object,
      required: true
    },
    // 任务数据
    task: {
      type: Object,
      required: true
    },
    // 是否显示任务面板
    showTaskPanel: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      startMarker: null, // 起点标记
      endMarker: null, // 终点标记
      trainMarker: null, // 车辆标记
      routePolyline: null, // 路径线
      infoWindow: null, // 信息窗口
      isAnimating: false, // 是否正在动画
      animationInterval: null, // 动画定时器
      currentStep: 0, // 当前动画步骤
      routePath: [], // 路径点数组
      subwayLayer: null, // 地铁图层
      showSubway: true, // 是否显示地铁
      subwayStations: [], // 地铁站点标记数组
      icons: {
        start: null, // 起点图标
        end: null, // 终点图标
        train: null, // 车辆图标
        subway: null // 地铁站图标
      }
    };
  },
  mounted() {
    this.initIcons();
    this.drawTaskRoute();
    this.initSubwayFeatures();
  },
  beforeDestroy() {
    this.clearAllMarkers();
    this.stopRouteAnimation();
    this.removeSubwayFeatures();
  },
  methods: {
    // 获取车辆编号
    getTrainNo() {
      if (this.task && this.task.taskTrain && this.task.taskTrain.trainNo) {
        return this.task.taskTrain.trainNo;
      }
      return 'N/A';
    },
    
    // 初始化图标
    initIcons() {
      // 起点图标 - 使用本地图片
      this.icons.start = new AMap.Icon({
        size: new AMap.Size(32, 32),
        image: require('@/assets/start.png'), // 起点图标
        imageSize: new AMap.Size(32, 32)
      });
      
      // 终点图标（目的地）- 使用本地图片
      this.icons.end = new AMap.Icon({
        size: new AMap.Size(32, 32),
        image: require('@/assets/endd.png'), // 目的地图标
        imageSize: new AMap.Size(32, 32)
      });
      
      // 车辆图标 - 使用本地图片
      this.icons.train = new AMap.Icon({
        size: new AMap.Size(32, 32),
        image: require('@/assets/car.png'), // 车辆图标
        imageSize: new AMap.Size(32, 32)
      });
      
      // 地铁站图标
      this.icons.subway = new AMap.Icon({
        size: new AMap.Size(24, 24),
        image: '//webapi.amap.com/theme/v1.3/markers/n/mark_bs.png', // 地铁站图标
        imageSize: new AMap.Size(24, 24)
      });
    },
    
    // 初始化地铁功能
    initSubwayFeatures() {
      // 动态加载地铁相关插件
      AMap.plugin(['AMap.Subway', 'AMap.SubwayLayer'], () => {
        // 创建地铁图层
        this.subwayLayer = new AMap.SubwayLayer({
          map: this.map,
          zIndex: 120, // 确保地铁图层在最上层
          opacity: 1, // 完全不透明
          isShow: true // 显示地铁图层
        });
        
        // 地图缩放时确保地铁图层可见
        this.map.on('zoomchange', () => {
          if (this.showSubway && this.subwayLayer) {
            this.subwayLayer.show();
          }
        });
        
        // 地图移动时确保地铁图层可见
        this.map.on('moveend', () => {
          if (this.showSubway && this.subwayLayer) {
            this.subwayLayer.show();
          }
        });
      });
      
      // 搜索附近的地铁站
      this.searchNearbySubwayStations();
    },
    
    // 搜索附近的地铁站
    searchNearbySubwayStations() {
      // 动态加载地铁搜索插件
      AMap.plugin('AMap.Subway', () => {
        const subway = new AMap.Subway({
          city: '北京' // 默认城市，可以根据实际需要修改
        });
        
        // 搜索起点附近的地铁站
        if (this.task.taskStart) {
          subway.searchNearBy(this.task.taskStart, 1000, (status, result) => {
            if (status === 'complete' && result.stationList) {
              this.drawSubwayStations(result.stationList);
            }
          });
        }
        
        // 搜索终点附近的地铁站
        if (this.task.taskEnd) {
          subway.searchNearBy(this.task.taskEnd, 1000, (status, result) => {
            if (status === 'complete' && result.stationList) {
              this.drawSubwayStations(result.stationList);
            }
          });
        }
      });
    },
    
    // 绘制地铁站点标记
    drawSubwayStations(stations) {
      stations.forEach(station => {
        // 检查是否已存在相同站点
        const exists = this.subwayStations.some(s => s.getExtData().id === station.id);
        if (!exists) {
          const marker = new AMap.Marker({
            position: station.location,
            title: station.name,
            icon: this.icons.subway,
            offset: new AMap.Pixel(-12, -12),
            zIndex: 125, // 确保地铁站标记在最上层
            extData: {
              id: station.id,
              name: station.name,
              lines: station.lines
            }
          });
          
          // 添加标签
          marker.setLabel({
            content: `<div class="subway-station-label">${station.name}</div>`,
            offset: new AMap.Pixel(0, 0),
            direction: 'top'
          });
          
          // 添加点击事件
          marker.on('click', () => {
            this.showSubwayStationInfo(station);
          });
          
          marker.setMap(this.map);
          this.subwayStations.push(marker);
        }
      });
    },
    
    // 显示地铁站信息
    showSubwayStationInfo(station) {
      const linesInfo = station.lines ? station.lines.map(line => line.name).join(', ') : '无';
      const content = `
        <div class="subway-info-window">
          <h4>${station.name}</h4>
          <p><strong>线路:</strong> ${linesInfo}</p>
          <p><strong>位置:</strong> (${station.location.lng.toFixed(4)}, ${station.location.lat.toFixed(4)})</p>
        </div>
      `;
      
      if (!this.infoWindow) {
        this.infoWindow = new AMap.InfoWindow({
          offset: new AMap.Pixel(0, -30)
        });
      }
      
      this.infoWindow.setContent(content);
      this.infoWindow.open(this.map, station.location);
    },
    
    // 切换地铁显示/隐藏
    toggleSubwayVisibility() {
      this.showSubway = !this.showSubway;
      if (this.subwayLayer) {
        if (this.showSubway) {
          this.subwayLayer.show();
          // 重新搜索地铁站
          this.searchNearbySubwayStations();
        } else {
          this.subwayLayer.hide();
          // 清除地铁站标记
          this.clearSubwayStations();
        }
      }
    },
    
    // 手动搜索附近地铁站
    searchNearbySubway() {
      if (this.showSubway) {
        this.searchNearbySubwayStations();
      }
    },
    
    // 清除地铁站标记
    clearSubwayStations() {
      this.subwayStations.forEach(marker => {
        marker.setMap(null);
      });
      this.subwayStations = [];
    },
    
    // 移除地铁功能
    removeSubwayFeatures() {
      if (this.subwayLayer) {
        this.subwayLayer.hide();
        this.subwayLayer = null;
      }
      
      this.clearSubwayStations();
    },
    
    // 绘制任务路径
    drawTaskRoute() {
      if (!this.task || !this.map) return;
      
      // 清除现有标记
      this.clearAllMarkers();
      
      // 获取起点和终点坐标
      const startPoint = this.task.taskStart;
      const endPoint = this.task.taskEnd;
      
      if (!startPoint || !endPoint) return;
      
      // 创建起点标记（使用本地图片）
      this.createStartMarker(startPoint);
      
      // 创建终点标记（使用本地图片作为目的地）
      this.createEndMarker(endPoint);
      
      // 创建信息窗口
      this.createInfoWindow();
      
      // 规划驾车路径
      this.planDrivingRoute(startPoint, endPoint);
    },
    
    // 创建起点标记
    createStartMarker(position) {
      this.startMarker = new AMap.Marker({
        position: position,
        title: '起点位置',
        icon: this.icons.start,
        offset: new AMap.Pixel(-16, -32),
        zIndex: 110 // 确保标记在地铁图层之上
      });
      
      this.startMarker.setMap(this.map);
    },
    
    // 创建终点标记（目的地）
    createEndMarker(position) {
      this.endMarker = new AMap.Marker({
        position: position,
        title: '目的地',
        icon: this.icons.end,
        offset: new AMap.Pixel(-16, -32),
        zIndex: 110 // 确保标记在地铁图层之上
      });
      
      this.endMarker.setMap(this.map);
      
      // 添加终点点击事件
      this.endMarker.on('click', () => {
        this.showTaskInfo();
      });
    },
    
    // 创建信息窗口
    createInfoWindow() {
      this.infoWindow = new AMap.InfoWindow({
        content: this.createInfoWindowContent(),
        offset: new AMap.Pixel(0, -30),
        isCustom: false
      });
    },
    
    // 规划驾车路径
    planDrivingRoute(startPoint, endPoint) {
      // 动态加载高德地图的驾车路线规划插件
      AMap.plugin('AMap.Driving', () => {
        // 使用高德地图驾车路线规划服务
        const driving = new AMap.Driving({
          map: this.map,
          policy: 0, // 最短时间策略
          ferry: false, // 不乘轮渡
          hideMarkers: true, // 隐藏默认标记
          autoFitView: true // 自动调整视野
        });
        
        // 路线规划完成回调
        driving.search(startPoint, endPoint, (status, result) => {
          if (status === 'complete' && result.routes && result.routes.length > 0) {
            // 获取驾车路径点
            this.routePath = result.routes[0].steps.reduce((acc, step) => {
              return acc.concat(step.path);
            }, []);
            
            // 绘制驾车路线
            this.drawDrivingRoute();
            
            // 创建车辆标记
            this.createTrainMarker();
          } else {
            console.error('驾车路线规划失败:', result);
            // 如果路线规划失败，使用直线连接
            this.routePath = [startPoint, endPoint];
            this.drawDrivingRoute();
            this.createTrainMarker();
          }
        });
      });
    },
    
    // 绘制驾车路线
    drawDrivingRoute() {
      // 清除之前的路线
      if (this.routePolyline) {
        this.routePolyline.setMap(null);
      }
      
      // 创建新的驾车路线
      this.routePolyline = new AMap.Polyline({
        path: this.routePath,
        strokeColor: "#00aaff", // 路线颜色
        strokeWeight: 6, // 路线宽度
        strokeOpacity: 0.8, // 路线透明度
        strokeStyle: "solid", // 路线样式
        lineJoin: "round", // 连接点样式
        showDir: true, // 显示方向箭头
        zIndex: 105 // 确保路线在地铁图层之上但低于标记
      });
      
      // 将路线添加到地图
      this.routePolyline.setMap(this.map);
      
      // 调整地图视野以适应路线
      this.map.setFitView([this.routePolyline]);
    },
    
    // 创建车辆标记
    createTrainMarker() {
      if (this.trainMarker) {
        this.trainMarker.setMap(null);
      }
      
      // 车辆初始位置为起点
      this.trainMarker = new AMap.Marker({
        position: this.task.taskStart,
        title: '车辆 ' + this.getTrainNo(),
        icon: this.icons.train,
        offset: new AMap.Pixel(-16, -32),
        animation: 'AMAP_ANIMATION_NONE', // 无动画
        zIndex: 110 // 确保标记在最上层
      });
      
      this.trainMarker.setMap(this.map);
    },
    
    // 创建信息窗口内容
    createInfoWindowContent() {
      return `
        <div class="task-info-window">
          <h4>任务信息</h4>
          <p><strong>任务名称:</strong> ${this.task.task}</p>
          <p><strong>任务编号:</strong> ${this.task.taskCode}</p>
          <p><strong>车辆编号:</strong> ${this.getTrainNo()}</p>
        </div>
      `;
    },
    
    // 显示任务信息
    showTaskInfo() {
      if (this.infoWindow && this.endMarker) {
        this.infoWindow.open(this.map, this.task.taskEnd);
      }
    },
    
    // 开始路线动画
    startRouteAnimation() {
      if (this.isAnimating || this.routePath.length === 0) return;
      
      this.isAnimating = true;
      this.currentStep = 0;
      
      // 清除之前的定时器
      if (this.animationInterval) {
        clearInterval(this.animationInterval);
      }
      
      // 开始动画
      this.animationInterval = setInterval(() => {
        if (this.currentStep < this.routePath.length) {
          const position = this.routePath[this.currentStep];
          if (this.trainMarker) {
            this.trainMarker.setPosition(position);
            
            // 如果接近终点，显示完成信息
            if (this.currentStep === this.routePath.length - 1) {
              this.showTaskInfo();
            }
          }
          this.currentStep++;
        } else {
          // 动画结束
          this.stopRouteAnimation();
        }
      }, 100); // 每100ms移动一步
    },
    
    // 停止路线动画
    stopRouteAnimation() {
      this.isAnimating = false;
      if (this.animationInterval) {
        clearInterval(this.animationInterval);
        this.animationInterval = null;
      }
    },
    
    // 清除所有标记
    clearAllMarkers() {
      // 清除起点标记
      if (this.startMarker) {
        this.startMarker.setMap(null);
        this.startMarker = null;
      }
      
      // 清除终点标记
      if (this.endMarker) {
        this.endMarker.setMap(null);
        this.endMarker = null;
      }
      
      // 清除车辆标记
      if (this.trainMarker) {
        this.trainMarker.setMap(null);
        this.trainMarker = null;
      }
      
      // 清除路径线
      if (this.routePolyline) {
        this.routePolyline.setMap(null);
        this.routePolyline = null;
      }
      
      // 清除地铁站标记
      this.clearSubwayStations();
      
      // 关闭信息窗口
      if (this.infoWindow) {
        this.infoWindow.close();
      }
      
      // 停止动画
      this.stopRouteAnimation();
    },
    
    // 更新任务数据
    updateTask(newTask) {
      this.task = newTask;
      this.drawTaskRoute();
      // 重新搜索地铁站
      if (this.showSubway) {
        this.searchNearbySubwayStations();
      }
    }
  }
};
</script>

<style scoped>
.task-route-display {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
}

.task-info-panel {
  background: rgba(0, 20, 40, 0.9);
  border: 1px solid #00aaff;
  border-radius: 8px;
  padding: 15px;
  color: #00ccff;
  min-width: 250px;
  max-height: 400px;
  overflow-y: auto;
}

.task-info-panel h3 {
  margin: 0 0 10px 0;
  color: #00aaff;
  font-size: 16px;
  text-align: center;
}

.task-details p {
  margin: 8px 0;
  font-size: 14px;
}

.task-controls {
  margin-top: 15px;
  text-align: center;
}

.task-controls button {
  background: #0066cc;
  color: #00ccff;
  border: 1px solid #00aaff;
  border-radius: 4px;
  padding: 6px 12px;
  margin: 0 5px;
  cursor: pointer;
  font-size: 12px;
}

.task-controls button:hover {
  background: #0088cc;
}

.task-controls button:disabled {
  background: #003366;
  cursor: not-allowed;
}
</style>

<style>
/* 信息窗口样式 */
.task-info-window {
  background: rgba(0, 20, 40, 0.95);
  border: 1px solid #00aaff;
  border-radius: 8px;
  padding: 15px;
  color: #00ccff;
  min-width: 200px;
}

.task-info-window h4 {
  margin: 0 0 10px 0;
  color: #00aaff;
  text-align: center;
}

.task-info-window p {
  margin: 5px 0;
  font-size: 14px;
}

.task-info-window strong {
  color: #00ffff;
}

/* 地铁站点样式 */
.amap-marker-label {
  background: rgba(0, 100, 200, 0.8);
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 0 5px rgba(0, 200, 255, 0.5);
}

/* 地铁路线样式 */
.amap-subway-layer {
  z-index: 120 !important;
  opacity: 1 !important;
}

/* 地铁站点标签 */
.subway-station-label {
  background: rgba(255, 100, 0, 0.9);
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 0 5px rgba(255, 100, 0, 0.8);
  font-weight: bold;
}

/* 地铁信息窗口 */
.subway-info-window {
  background: rgba(0, 20, 40, 0.95);
  border: 1px solid #ff6600;
  border-radius: 8px;
  padding: 15px;
  color: #ffcc00;
  min-width: 200px;
}

.subway-info-window h4 {
  margin: 0 0 10px 0;
  color: #ff6600;
  text-align: center;
}

.subway-info-window p {
  margin: 5px 0;
  font-size: 14px;
}

.subway-info-window strong {
  color: #ff9900;
}
</style>